<script setup>
	import {
		ref
	} from 'vue';

	const ipValue = ref("")
	const isActive = ref(false)
	// function onFocus() {
	// 	isActive.value=true;
	// }

	// function onBlur() {
	// 	isActive.value=false;
	// }

	// function onInput(e) {
	// 	ipValue.value = e.detail.Value;
	// }

	function onConfirm(e) {
		console.log(e);
	}
</script>
<template>
	<view class="out">
		<!-- <input type="text" :value="ipValue" @focus="isActive=true" @blur="isActive=false"
			@input="event=>ipValue=event.detail.value" /> -->
		<input type="text" @focus="isActive=true" @blur="isActive=false" v-model="ipValue" @confirm="onConfirm" />

		<image src="/static/xtxg.gif" mode="" class="pic" :class=" isActive?'active':'' "></image>
	</view>
	<view>预览:{{ipValue}}</view>
</template>
<style lang="scss" scoped>
	.out {
		padding: 0 20px;
		margin-top: 40px;
		position: relative; //相对定位

		input {
			border: 1px solid #000000;
			height: 40px;
			background-color: white;
			position: relative;
			z-index: 2; //层级为2，高
			padding: 0 10px;
		}

		.pic {
			width: 40px;
			height: 40px;
			z-index: 1; //层级为1，低
			position: absolute; //绝对定位
			top: 0px;
			left: calc(50% - 15px);
			transition: top 0.5s;
		}

		.pic.active {
			top: -35px;
		}
	}
</style>